import {
  queryReportSensitiveSwitch,
  queryWebSensitiveSwitch,
  updateReportSensitiveSwitch,
  updateWebSensitiveSwitch,
} from 'admin/servers/servers';
import { message, Switch, Tabs } from 'antd';
import React, { Component } from 'react';
import './style.scss';

const { TabPane } = Tabs;

interface Props {}
interface State {
  /**界面敏感信息开关 */
  webSetSwitch?: string;
  /**报表敏感信息开关 */
  reportSetSwitch?: string;
}

/**系统设置-敏感信息设置 */
export default class SystemSet extends Component<Props, State> {
  state = {
    webSetSwitch: undefined,
    reportSetSwitch: undefined,
  };
  componentDidMount() {
    this.fetchData();
  }
  /**查询数据 */
  async fetchData() {
    try {
      const res1 = await queryWebSensitiveSwitch();
      const res2 = await queryReportSensitiveSwitch();
      this.setState({
        webSetSwitch: res1.data.switchFlag,
        reportSetSwitch: res2.data.switchFlag,
      });
    } catch (error) {
      console.error(`系统异常: ${JSON.stringify(error)}`);
    }
  }

  /**界面敏感信息开关 */
  onWebSetChange = async (value: any) => {
    try {
      const val: 'on' | 'off' = value ? 'on' : 'off';
      const data = {
        switchFlag: val,
      };
      await updateWebSensitiveSwitch(data);
      message.success('修改成功');
      this.setState({
        webSetSwitch: data.switchFlag,
      });
    } catch (error) {
      console.error(`系统异常: ${JSON.stringify(error)}`);
    }
  };
  /**报表敏感信息开关 */
  onReportSetChange = async (value: any) => {
    try {
      const val: 'on' | 'off' = value ? 'on' : 'off';
      const data = {
        switchFlag: val,
      };
      await updateReportSensitiveSwitch(data);
      message.success('修改成功');
      this.setState({
        reportSetSwitch: data.switchFlag,
      });
    } catch (error) {
      console.error(`系统异常: ${JSON.stringify(error)}`);
    }
  };
  render() {
    const { webSetSwitch, reportSetSwitch } = this.state;
    return (
      <div className="system-set">
        <Tabs tabPosition="left" className="set-content">
          <TabPane tab="敏感信息设置" key="1">
            {/* 后期如果有其他设置，需分离子组件 */}
            <div className="box-header">敏感信息设置</div>
            <div className="box">
              <div className="box-in">
                <div>界面敏感信息脱敏</div>
                <p>开启后，系统界面中用户敏感信息会部分隐藏</p>
              </div>
              {webSetSwitch && (
                <Switch checked={webSetSwitch === 'on'} onChange={this.onWebSetChange} />
              )}
            </div>
            <div className="box">
              <div className="box-in">
                <div>报表敏感信息脱敏</div>
                <p className="grey">开启后，报表中用户敏感信息会部分隐藏</p>
              </div>
              {reportSetSwitch && (
                <Switch checked={reportSetSwitch === 'on'} onChange={this.onReportSetChange} />
              )}
            </div>
          </TabPane>
        </Tabs>
      </div>
    );
  }
}
